<template>
  <div class="tation">
    <heads title="刘德换的会诊单"></heads>
    <div class="nav">
      <div class="theList">
        <ul>
          <li>
            <p>
              转入科室及医生
              <img src="https://s1.ax1x.com/2022/10/19/xsQEgP.png" alt="" />
            </p>
            <el-select v-model="value" placeholder="请选择" class="choose">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <input type="text" placeholder="输入接诊医生姓名" />
            <input type="text" placeholder="输入接诊医生手机号（选填）" />
          </li>
        </ul>
      </div>
      <div class="theData">
        <span>预约时间</span>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="theList">
        <span>会诊软件</span>
        <input type="text" placeholder="红云医疗" />

        <p>分诊建议</p>
        <input type="text" placeholder="会诊分诊已通过，请届时参加会诊" />
      </div>
      <div class="complete">
        <button>提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import heads from "@/components/heads/heads.vue";
export default {
  components: { heads },
  data() {
    return {
      input: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
    };
  },
};
</script>

<style lang="less" scoped>
input {
  border: 0;
  border-bottom: 0.0625rem solid #dcdfe6;
  margin-top: 1.875rem;
  width: 100%;
}
.nav {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  .theList {
    height: 180px;
    color: #999999;
    margin-top: 0.9375rem;
    font-size: 0.875rem;
  }
  p {
    margin: 0.625rem 0 0.625rem 0;
    img {
      width: 0.9375rem;
      height: 0.9375rem;
      float: right;
    }
  }
  .choose {
    width: 100%;

    border: 0;
  }
  .complete {
    height: 2.5rem;
    display: flex;
    justify-content: center;
    button {
      width: 8.75rem;
      height: 2.5rem;
      background: #169bd5;
      border: 0;
      color: #fff;
      margin-top: 2.5rem;
      border-radius: 0.3125rem;
    }
  }
  .theData {
    box-sizing: border-box;
    padding-top: 10px;
    height: 4.375rem;
    color: #999999;
    font-size: 0.875rem;
    span{
      display: block;
      margin-bottom: .625rem;
    }
  }
}
</style>